<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>Huanqiu Front-end labrary</title>
<link id="customStyle" rel="stylesheet" rev="stylesheet" href="../assets/dpSyntaxHighlighter.css" type="text/css" media="screen"/>
<style> 
	.demo{ 
	    width:150px; 
	    height:200px; 
	    padding:10px; 
	    border:1px solid #000080; 
	    background:#abe0f8; 
	    margin:10px; 
	} 
</style> 
<script src="../_hqfl/HQ.config.js" type="text/javascript"></script>
<script src="../_hqfl/HQ.dom.js" type="text/javascript"></script>
<script src="../_hqfl/HQ.event.js" type="text/javascript"></script>
<script src="../_hqfl/HQ.cookie.js" type="text/javascript"></script>
<script src="../_hqfl/HQ.css.js" type="text/javascript"></script>
</head>
<body>
<h1>Huanqiu Front-end labrary<sup>BETA</sup></h1>
<div><button type="button" onclick="checkBrowser()">判断浏览器类型</button></div>
<script type="text/javascript">
function checkBrowser(){ 
	if (HQ.userAgent.firefox) { 
		alert("这是 Firefox" + HQ.userAgent.firefox); 
	}else{ 
		alert('这不是火狐狸');
	}
}
</script>
<fieldset>
<legend>DOM</legend>
<button id="idtest" type="button" onclick="alert('this.innerHTML='+HQ.dom.getById('idtest').innerHTML)">HQ.dom.getById('idtest').innerHTML</button>
<button id="idtest2" type="button" onclick="alert('this.innerHTML='+$('idtest2').innerHTML)">$('idtest2').innerHTML</button>
<textarea name="code" class="Javascript" cols="60" rows="1">
alert('this.innerHTML='+HQ.dom.getById('idtest').innerHTML)
alert('this.innerHTML='+$('idtest2').innerHTML)
</textarea>
</fieldset>
<fieldset>
<legend>DOM</legend>
<input id="tagnametest" type="text" value="HQ.dom.get('tagnametest').innerHTML" onclick="HQ.dom.get('tagnametest').value='ok!:->'" /></button>
<textarea name="code" class="Javascript" cols="60" rows="1">
HQ.dom.get('tagnametest').value='ok!:->'
</textarea>
<br />
<input type="text" name="ipt_name" value="name=iptname" />
<input type="text" name="ipt_name" value="name=iptname" />
<input type="text" name="ipt_name" value="name=iptname" />
<br />
<button type="button" onclick="alert('input name=ipt_name 的个数为：'+HQ.dom.getByName('ipt_name','input').length)">alert(HQ.dom.getByName('ipt_name','input').length)</button>
<textarea name="code" class="Javascript" cols="60" rows="1">
alert('input name=ipt_name 的个数为：'+HQ.dom.getByName('ipt_name','input').length)
</textarea>
<ul>
	<li class="item">列表拥有classname</li>
	<li class="item">列表拥有classname</li>
	<li class="item">列表拥有classname</li>
	<li class="item">列表拥有classname</li>
	<li class="item">列表拥有classname</li>
</ul>
<button type="button" onclick="showitem('li','item')">class为item的li</button>
<script>
function showitem(el,classname){
	alert(HQ.dom.searchElementByClassName(el,classname));
}
</script>
<textarea name="code" class="Javascript" cols="60" rows="1">
function showitem(el,classname){
	alert(HQ.dom.searchElementByClassName(el,classname));
}
</textarea>
<div id="el_insert" style="background:#c00"> id:el_insert</div>
<style>
#el_insert * {width:10px;height:10px;border:1px #fff solid;}
</style>
<button type="button" onclick="insert('p','el_insert',attributes)">creat dom</button>
<button type="button" onclick="HQ.dom.removeElement('p')">removeElement</button>
<script>
function insert(tagName,el,insertFirst){
	var _attributes= 'id:"newDom1",style:"width:10px;"';
	HQ.dom.createElementIn(tagName,el,_attributes);
}

</script>
</fieldset>
<fieldset>
	<legend>获取窗体的基本信息</legend>
	<div id="info"></div>
<script type="text/javascript">
//绑定监听事件
if (HQ.userAgent.ie) { //scroll方法在ie只能用 document.documentElement 才能绑定
	HQ.event.addEvent(document.documentElement,"scroll",_getViewInfo);
}else{
	HQ.event.addEvent(document,"scroll",_getViewInfo);
}
HQ.event.addEvent(window,"resize",_getViewInfo);

//获得对象
var _i = HQ.dom.get("info");

function _getViewInfo(){
   _i.innerHTML = [
		"窗口可视区域的宽度: ",HQ.dom.getClientWidth(),"<br/>", //获得窗口可视区域的宽度
		"窗口可视区域的高度: ",HQ.dom.getClientHeight(),"<br/>", //获得窗口可视区域的高度
		"纵向滚动条滚动距离: ",HQ.dom.getScrollTop(),"<br/>", //获得纵向滚动条滚动距离
		"横向滚动条滚动距离: ",HQ.dom.getScrollLeft(),"<br/>" //获得横向滚动条滚动距离
	].join("");
}

_getViewInfo();
</script>
<textarea name="code" class="Javascript" cols="60" rows="1">
//绑定监听事件
if (HQ.userAgent.ie) { //scroll方法在ie只能用 document.documentElement 才能绑定
	HQ.event.addEvent(document.documentElement,"scroll",_getViewInfo);
}else{
	HQ.event.addEvent(document,"scroll",_getViewInfo);
}
HQ.event.addEvent(window,"resize",_getViewInfo);

//获得对象
var _i = HQ.dom.get("info");

function _getViewInfo(){
   _i.innerHTML = [
		"窗口可视区域的宽度: ",HQ.dom.getClientWidth(),"<br/>", //获得窗口可视区域的宽度
		"窗口可视区域的高度: ",HQ.dom.getClientHeight(),"<br/>", //获得窗口可视区域的高度
		"纵向滚动条滚动距离: ",HQ.dom.getScrollTop(),"<br/>", //获得纵向滚动条滚动距离
		"横向滚动条滚动距离: ",HQ.dom.getScrollLeft(),"<br/>" //获得横向滚动条滚动距离
	].join("");
}

_getViewInfo();
</textarea>
</fieldset>

<fieldset>
	<legend>对dom的基本操作</legend>
<div id="demo" class="demo">我是一个div</div> 
<button onclick="HQ.dom.setStyle($('demo'),'opacity',0.5)">设置透明色</button><br/> 
<button onclick="HQ.dom.setStyle($('demo'),'position','absolute');HQ.dom.setXY($('demo'),300,200)">设置漂浮</button><br/> 
<button onclick="HQ.dom.setSize($('demo'),300,150)">设置对象大小</button> 
<br/>
<button onclick="alert(HQ.dom.getStyle($('demo'),'position'))">获取position样式</button>
<br/>
<button onclick="alert(HQ.dom.getXY($('demo')).join(':'))">获取相对坐标</button>
<br/>
<button onclick="alert(HQ.dom.getSize($('demo')).join(':'))">获取对象大小</button>

<textarea name="code" class="Javascript" cols="60" rows="1">
<style> 
	.demo{ 
	    width:150px; 
	    height:200px; 
	    padding:10px; 
	    border:1px solid #000080; 
	    background:#abe0f8; 
	    margin:10px; 
	} 
</style> 
<div id="demo" class="demo">我是一个div</div> 
<button onclick="HQ.dom.setStyle($('demo'),'opacity',0.5)">设置透明色</button><br/> 
<button onclick="HQ.dom.setStyle($('demo'),'position','absolute');HQ.dom.setXY($('demo'),300,200)">设置漂浮</button><br/> 
<button onclick="HQ.dom.setSize($('demo'),300,150)">设置对象大小</button> 

<br/>
<button onclick="alert(HQ.dom.getStyle($('demo'),'position'))">获取position样式</button>
<br/>
<button onclick="alert(HQ.dom.getXY($('demo')).join(':'))">获取相对坐标</button>
<br/>
<button onclick="alert(HQ.dom.getSize($('demo')).join(':'))">获取对象大小</button>
</textarea>
</fieldset>
	<script src="../assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript"> 
	dp.SyntaxHighlighter.HighlightAll('code'); 
	</script>
</body>
</html>
